<template>
  <el-dialog title="库存综合查询(仓位)" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button @click="printInfo">导出成Excel</el-button>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <div class="avue-crud">
      <el-table :data="dataList" ref="singleTable" :max-height="screenHeight" border stripe header-cell-class-name="miui-header-cell-style" v-loading="dataListLoading">
        <el-table-column prop="goodsCode" label="编码" width="170" fixed="left"></el-table-column>
            <el-table-column prop="viewGoodsName" label="商品名称" width="300" v-if="this.dataForm.queryPoint== '1'" fixed="left"></el-table-column>
            <el-table-column prop="brandName" label="品种名称" width="180"  v-if="this.dataForm.queryPoint== '2'" fixed="left"></el-table-column>
            <el-table-column prop="ctgName" label="商品类别" width="70"></el-table-column>
            <el-table-column prop="supplyName" label="制造商" width="180"></el-table-column>
            <el-table-column prop="goodsQuantity" label="数量小计" width="80"></el-table-column>
            <template v-for='item in stockOptions'>
              <el-table-column :show-overflow-tooltip="true" :prop="item.name" :label="item.name" :key="item.id" :width="itemWidth(item.name)">
                <template slot-scope="scope">
                  <span v-if="scope.row[item.name] != 0">{{scope.row[item.name]}}</span>
                </template>
              </el-table-column>
            </template>
      </el-table>
    </div>
    <div>
      <span>库存总合计：{{this.dataForm.sum}}</span>
    </div>
    <div class="avue-crud__pagination" style="margin-bottom: 25px;margin-top: 0;">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
  import {filterParams} from '@/util/tools'
  import { getcomprehensiveCheckPage,getGoodsNumberSum,storageComprehensiveCheckExport,getcomprehensiveCheckList } from '@/api/eims/storage'
  import {getStockList,getListByIds} from '@/api/eims/stock'

  //import TableForm from './form'
  import {mapGetters} from 'vuex'
  export default {
    data () {
      return {
        visible: false,
        screenHeight: document.body.clientHeight - 140,
        dataForm: {
          groupFlag: '',
          groupFlag: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 200,
        totalPage: 0,
        stockOptions: [],
        dataListLoading: false
      }
    },
    computed: {
      ...mapGetters(['permissions']),
    },
    methods: {
      itemWidth(name){
        let length = name.length
        switch (length) {
          case 1:
            return 20
            break
          case 2:
            return 30
            break
          case 3:
            return 40
            break
          case 4:
            return 60
            break
          case 5:
            return 70
            break
          case 6:
            return 80
            break
          case 7:
            return 90
            break
          case 8:
            return 110
            break
          case 9:
            return 120
            break
          case 10:
            return 135
            break
        }
      },
      init(data){
        this.dataForm.queryPoint = data.queryPoint
        this.dataForm.groupFlag = data.groupFlag
        if(data.stockIds){
          getListByIds({ids:data.stockIds}).then(response => {
            if(response.data.code == '0'){
              this.stockOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }else{
          getStockList().then(response => {
            if(response.data.code == '0'){
              this.stockOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }
        this.dataList = []
        this.pageIndex = 1
        this.pageSize = 200
        this.totalPage = 0
        this.dataForm.params2= filterParams(data)
        this.visible = true
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm.params2)
        this.dataListLoading = true
        getcomprehensiveCheckPage(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
					this.dataListLoading = false
        })
        getGoodsNumberSum(params2).then(response => {
          if(response.data.code == '0'){
            this.dataForm.sum = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
        printInfo(){
          let params2 = filterParams(this.dataForm.params2)
          storageComprehensiveCheckExport(params2).then(response => {
            var blob = new Blob([response.data])
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function(e) {
                var a = document.createElement('a');
                a.download = "库存综合查询(仓位).xlsx";
                a.href = URL.createObjectURL(blob);
                a.click();
            }
          })
       }
    }
  }
</script>
